import React, { ReactNode, useContext } from 'react';
import classNames from 'classnames';
import { MenuContext } from './menu';

export interface MenuItemBaseProps {
  /** MenuItem下标 */
  index?: number;
  /** 是否禁用 */
  disabled?: boolean;
  /** 样式名称 */
  className?: string;
  /** 子节点 */
  children?: ReactNode;
}
const MenuItem: React.FC<MenuItemBaseProps> = (props) => {
  const { index, className, children, disabled } = props;
  const context = useContext(MenuContext);

  const classes = classNames('mid-menu-item', className, {
    'is-disabled': disabled,
    'is-active': index === context.index,
  });

  const handleClick = () => {
    if (context.selectedFn && !disabled) context.selectedFn(index!);
  };

  return (
    <li className={classes} onClick={handleClick}>
      {children}
    </li>
  );
};
export default MenuItem;
